<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"/>
    <meta name="author" content="永不言败">
    <title>聊天</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
</head>
<style>
    li{list-style-type: none;}
    .mySend{color: red;text-align: right;}
    .expression{width: 210px;height: 200px;display: none;}
    .expression li{float: left;}
</style>
<body>
    <h2>注册</h2>
    <form>
        <p>用户名：<input name="username" value=""></p>
        <p>密码：<input name="password" value=""></p>
        <p>昵称：<input name="nickname" value=""></p>
        <p><input type="button" value="注册" onclick="userRegister(this);"></p>
    </form><hr/>

    <h2>登陆</h2>
    <form>
        <p>用户名：<input name="username" value="junyong"></p>
        <p>密码：<input name="password" value="123456"></p>
        <p><input type="button" value="登录" onclick="userLogin(this);"></p>
    </form><hr/>

    <h2>退出</h2>
    <form>
        <p><input type="button" value="退出" onclick="hxUserExit(this);"></p>
    </form><hr/>

    <h2>添加好友</h2>
    <form>
        <p>用户名：<input name="username" value=""></p>
        <p><input type="button" value="添加" onclick="addFriends(this);"></p>
    </form><hr/>

    <h2>删除好友</h2>
    <form>
        <p>用户名：<input name="to" value=""></p>
        <p><input type="button" value="删除" onclick="removeFriends(this);"></p>
    </form><hr/>

    <h2>获取好友列表 </h2>
    <form>
        <p>用户名：<input name="username" value="junyong"></p>
        <p><input type="button" value="获取" onclick="getFriends();"></p>
    </form>
    <ul class="friendsList"></ul><hr/>

    <h2>获取黑名单列表</h2>
    <form>
        <p><input type="button" value="获取" onclick="getBlackList();"></p>
    </form>
    <ul class="getBlackList"></ul>
    <hr/>

    <h2>将好友加入黑名单</h2>
    <form>
        <p>用户名：<input name="to" value="oli"></p>
        <p><input type="button" value="加入" onclick="toBlackList(this);"></p>
    </form>
    <ul class="toBlackList "></ul>
    <hr/>

    <h2>发送消息（单聊）</h2>
    <form>
        <p>对方的帐号：<input name="to" value="oli"></p>
        <div style="width: 500px;height: 260px;">消息：<input name="message" value="[(k)]">
            <input type="button" onclick="$('.expression').toggle();" value="表情"/>
            <ul class="expression"></ul>
        </div>
        <div><input type="button" value="发送" onclick="sentMessage(this);"></div>
        <p>单聊发送图片消息：<input name="singleImage" type="file" id="singleImage" onchange="sendPrivateImg('singleChat',this)"></p>
        <p>单聊发送文件消息：<input name="singleFile" type="file" id="singleFile" onchange="sendPrivateFile('singleChat',this)"></p>
        <p>单聊发送音频消息：<input name="singleAudio" type="file" id="singleAudio" onchange="sendPrivateAudio('singleChat',this)"></p>
        <p>单聊发送视频消息：<input name="singleVideo" type="file" id="singleVideo" onchange="sendPrivateVideo('singleChat',this)"></p>
    </form><hr/>

    <h2>显示聊天消息</h2>
    <ul class="chat_message"></ul><hr/>

    <h2>创建群组（本身无法保存群名称、简介、成员，可以创建）</h2>
    <form>
        <p>群名称：<input name="name" value=""></p>
        <p>群简介：<input name="description" value=""></p>
        <p>群成员：<input name="members" value="1133161018115126#chaishi_oli@easemob.com,1133161018115126#chaishi_oli2@easemob.com"></p>
        <p><input type="button" value="创建" onclick="create_group(this);"></p>
    </form><hr/>

    <h2>将好友加入群组</h2>
    <form>
        <p>成员：<input name="list" value="oli,oli2"></p>
        <p>群id：<input name="roomId" value=""></p>
        <p><input type="button" value="加入" onclick="add_group_members(this);"></p>
    </form><hr/>

    <h2>将成员踢出群组</h2>
    <form>
        <p>群id：<input name="roomId" value=""></p>
        <p>成员ID：<input name="to" value=""></p>
        <p><input type="button" value="踢出" onclick="add_to_group_black_list(this);"></p>
    </form><hr/>

    <h2>解散群组</h2>
    <form>
        <p>解散原因：<input name="reason" value="test"></p>
        <p>群id：<input name="roomId" value=""></p>
        <p><input type="button" value="解散" onclick="destroy_group(this);"></p>
    </form><hr/>

    <h2>成员退出群组</h2>
    <form>
        <p>成员：<input name="to" value=""></p>
        <p>群id：<input name="roomId" value=""></p>
        <p><input type="button" value="退出" onclick="leave_group(this);"></p>
    </form><hr/>

    <h2>获取群组列表</h2>
    <form>
        <p><input type="button" value="获取" onclick="getListGroups();"></p>
    </form>
    <ul class="listGroups"></ul><hr/>

    <h2>获取群组组员信息</h2>
    <form>
        <p>群组id：<input name="roomId" value=""></p>
        <p><input type="button" value="获取" onclick="getQueryRoomMember(this);"></p>
    </form>
    <ul class="queryRoomMember"></ul><hr/>

    <h2>获取群组信息（内部错误）</h2>
    <form>
        <p>群组id：<input name="roomId" value="1491465876963"></p>
        <p><input type="button" value="获取" onclick="query_group_info(this);"></p>
    </form><hr/>

    <h2>修改群组信息</h2>
    <form>
        <p>群组id：<input name="roomId" value="1491385570418"></p>
        <p>群组名称：<input name="subject" value=""></p>
        <p>群组简介：<input name="description" value=""></p>
        <p><input type="button" value="修改" onclick="change_group_info(this);"></p>
    </form><hr/>

    <h2>发送消息（群组）</h2>
    <form>
        <p>群组id：<input name="to" value="1490753224149"></p>
        <p>消息：<input name="message" value="[(F)]"></p>
        <p><input type="button" value="发送" onclick="sentGroupMessage(this);"></p>
        <p>群组发送图片消息：<input name="image" type="file" id="groupImage" onchange="sendPrivateImg('groupChat',this)"></p>
        <p>群组发送文件消息：<input name="groupFile" type="file" id="groupFile" onchange="sendPrivateFile('groupChat',this)"></p>
        <p>群组发送音频消息：<input name="groupAudio" type="file" id="groupAudio" onchange="sendPrivateAudio('groupChat',this)"></p>
        <p>群组发送视频消息：<input name="groupVideo" type="file" id="groupVideo" onchange="sendPrivateVideo('groupChat',this)"></p>
    </form><hr/>

</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type='text/javascript' src='res/js/sha1.js'></script>
<script type='text/javascript' src='res/js/webim.config.js'></script>
<script type='text/javascript' src='res/js/strophe-1.2.8.min.js'></script>
<script type='text/javascript' src='res/js/websdk-1.4.10.min.js'></script>
<script type='text/javascript' src='res/js/hx_api.js'></script>
<script>
    $(document).ready(function () {

        tokenLogin();// token登录

        expression();// 加载表情
    });

    //回调
    conn.listen({
        onOpened: function ( message ) {//连接成功回调
            console.log('连接成功');
            console.log(message);
            // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
            // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
            // 则无需调用conn.setPresence();
            conn.setPresence();
        },
        onClosed: function ( message ) {//连接关闭回调
            console.log("连接关闭回调");

        },
        onTextMessage: function ( message ) {//收到文本消息
            handleTextMessage(message);
        },
        onEmojiMessage: function ( message ) { //收到表情消息
            emojiMessage(message);
        },
        onPictureMessage: function ( message ) {//收到图片消息
            pictureMessage(message);
        },
        onCmdMessage: function ( message ) {//收到命令消息
            console.log("收到命令消息");

        },
        onAudioMessage: function ( message ) {//收到音频消息
            audioMessage(message);
        },
        onLocationMessage: function ( message ) {//收到位置消息
            console.log("收到位置消息");

        },
        onFileMessage: function ( message ) {//收到文件消息
            fileMessage(message);
        },
        onVideoMessage: function (message) {//收到视频消息
            console.log(message);
            var node = document.getElementById('privateVideo');
            var option = {
                url: message.url,
                headers: {
                    'Accept': 'audio/mp4'
                },
                onFileDownloadComplete: function (response) {
                    var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
                    node.src = objectURL;
                },
                onFileDownloadError: function () {
                    console.log('File down load error.')
                }
            };
            WebIM.utils.download.call(conn, option);
        },
        onPresence: function ( message ) {//收到联系人订阅请求、处理群组、聊天室被踢解散等消息
            var e = message;

            //（发送者希望订阅接收者的出席信息），即别人申请加你为好友
            if ( e.type === 'subscribe' ) {
                //若e.status中含有[resp:true],则表示为对方同意好友后反向添加自己为好友的消息，demo中发现此类消息，默认同意操作，完成双方互为好友；如果不含有[resp:true]，则表示为正常的对方请求添加自己为好友的申请消息。
                if(confirm(e.from + "加您为好友，确定要添加对方为好友吗？")){
                    requestAddFriends(e.from);
                }else{
                    requestRemoveFriends(e.from);
                }
            }
            //(发送者允许接收者接收他们的出席信息)，即别人同意你加他为好友
            if ( e.type === 'subscribed' ) {
                alert(e.from + "同意你加他为好友");
            }
            //（发送者取消订阅另一个实体的出席信息）,即删除现有好友
            if ( e.type === 'unsubscribe' ) {

            }
            //（订阅者的请求被拒绝或以前的订阅被取消），即对方单向的删除了好友
            if ( e.type === 'unsubscribed' ) {
                alert(e.from + '拒绝了您的添加请求');
            }
        },
        onRoster: function ( message ) {//处理好友申请
            console.log(message);
        },
        onInviteMessage: function ( message ) {//处理群组邀请
            console.log("处理群组邀请");

        },
        onOnline: function () {//本机网络连接成功
            console.log("本机网络连接成功");

        },
        onOffline: function () {//本机网络掉线
            console.log("本机网络掉线");

        },
        onError: function ( message ) {//失败回调
            console.log("失败回调");

        },
        onBlacklistUpdate: function (list) {//黑名单变动
            // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
            console.log(list);

            $(".getBlackList").empty();
            var black_html = "";
            var session_black = "";
            for(var i in list){
                black_html += "用户名：" + list[i].name + "，jid：" + list[i].jid;

//                session_black += list[i].name + ":{jid: '" + list[i].jid + "',name: '" + list[i].name + "',subscription: 'both',order: '" + list[i].name + "',type: 'jid'" + "}";
//                session_black += '{"type":"jid","order":"2","jid":"1133161018115126#chaishi_oli@easemob.com","name":"oli"},{"type":"jid","order":"2","jid":"1133161018115126#chaishi_oli2@easemob.com","name":"oli2"}';
            }
            $(".getBlackList").html(black_html);

//            saveSessionStorage("session_black",session_black);
        }
    });

    // 用户注册
    function userRegister(obj) {
        var username = $(obj).parents('form').find("input[name='username']").val();
        var password = $(obj).parents('form').find("input[name='password']").val();
        var nickname = $(obj).parents('form').find("input[name='nickname']").val();
        hxRegister(username,password,nickname,function (data) {
            console.log('注册成功');
            userLogin(obj);//登录
            console.log(data);
        });
    }


    // 登录
    function userLogin(obj){
        var username = $(obj).parents('form').find("input[name='username']").val();
        var password = $(obj).parents('form').find("input[name='password']").val();

        console.log(password);
        saveSessionStorage("username",username);// 保存用户名，在免登录需使用
        hxLogin(username,password, function (data) {
            //缓存token，用于快速登录
            var token = data.access_token;
            WebIM.utils.setCookie('webim_' + hex_sha1(username), token, 1);

            //缓存用户信息
            console.log(data.user);
            WebIM.utils.setCookie('webim_uinfo_' + hex_sha1(username), token, 1);
        });
    }


    // token登录
    function tokenLogin() {
        var Session_username = getSessionStorage("username");// 获取用户名
        hxLogin(Session_username);
    }


    /**
     * 处理文本消息
     * @param messages 返回的参数
     */
    function handleTextMessage(messages) {
        console.log(messages);
        $(".chat_message").append("<li>"+ messages.from + "说：" + messages.data+"</li>");
    }

    // 处理文本、表情消息
    function emojiMessage(message) {
        console.log(message);

        // 当为WebIM添加了Emoji属性后，若发送的消息含WebIM.Emoji里特定的字符串，connection就会自动将
        // 这些字符串和其它文字按顺序组合成一个数组，每一个数组元素的结构为{type: 'emoji(或者txt)', data:''}
        // 当type='emoji'时，data表示表情图像的路径，当type='txt'时，data表示文本消息
        var data = message.data;


        var li_html = "<li>";
        for(var i = 0 , l = data.length ; i < l ; i++){
            if(data[i].type == "emoji"){// 表情
                li_html += "<img src='"+data[i].data+"'/>";
            }else if(data[i].type == "txt"){// 文本
                li_html += data[i].data;
            }
        }
        li_html += "</li>"

        $(".chat_message").append(li_html);
    }

    /**
     * 发送消息给指定的用户（单聊）
     */
    function sentMessage(obj) {
        var to = $(obj).parents('form').find('input[name="to"]').val();
        var message = $(obj).parents('form').find('input[name="message"]').val();

        sendPrivateText(to,message,function (success) {
            $(".chat_message").append("<li class='mySend'>我说："+ WebIM.utils.parseEmoji(message) + "</li>");
        });
    }


    // 获取群组列表
    function getListGroups() {
        listGroups(function (data) {
            console.log(data);
            $(".listGroups").empty();
            for(var i=0;i<data.length;i++){
                $(".listGroups").append("<li>" + "群名:" + data[i].name + "   群组id：" + data[i].roomId + "</li>");
            }
        });
    }


    // 查询群组成员
    function getQueryRoomMember (obj) {
        var roomId = $(obj).parents('form').find("input[name='roomId']").val();

        queryRoomMember(roomId,function (data) {
            console.log(data);
            $(".queryRoomMember").empty();
            for (var o in data) {
                member = data[o];
                console.log(member)
                $(".queryRoomMember").append("<li>" + member.jid + "</li>");
            }
        });
    }


    /**
     * 获取群组信息
     * @param obj
     */
    function query_group_info(obj) {
        var roomId = $(obj).parents('form').find("input[name='roomId']").val();

        hxQueryGroupInfo(roomId);
    }

    /**
     * 修改群组信息
     * @param obj
     */
    function change_group_info(obj) {
        var roomId = $(obj).parents('form').find("input[name='roomId']").val();
        var subject = $(obj).parents('form').find("input[name='subject']").val();
        var description = $(obj).parents('form').find("input[name='description']").val();

        console.log(roomId);
        console.log(subject);
        console.log(description);

        hxChangeGroupInfo(roomId,subject,description,function () {
            console.log('Change Group Names Success!');
        });
    }

    /**
     * 发送文本消息（群组）
     * @param obj
     */
    function sentGroupMessage(obj) {
        var to = $(obj).parents('form').find('input[name="to"]').val();
        var message = $(obj).parents('form').find('input[name="message"]').val();

        sendGroupText("groupchat",to,message,function (data) {
            console.log(data);
            console.log("发送群聊~");
            $(".chat_message").append("<li class='mySend'>我说："+WebIM.utils.parseEmoji(message)+"</li>");
        });
    }


    /**
     * 收到图片消息
     */
    function pictureMessage(message) {
        hxPictureMessage(message,function () {
            // 图片下载成功
            console.log('Image download complete!');

            $(".chat_message").append("<li>"+message.from+"说：<img src="+message.url+"></li>");
        });
    }

    /**
     * 收到音频消息
     */
    function audioMessage(message) {
        hxAudioMessage(message,function ( response ) {
            console.log(response);
            //音频下载成功
            console.log("音频消息下载地址：" + message.url);

            var name = message.filename;
            var ext = (name.substring(name.indexOf("."),name.length)).toLowerCase();
            if(ext == ".mp4" || ext == ".wmv" || ext == ".avi" || ext == ".rmvb" || ext == ".mkv"){ //视频
                $(".chat_message").append("<li>"+message.from+"说：<video width='320' height='240' controls><source src='"+ message.url +"'/></video></li>");
            }else if(ext == ".mp3" || ext == ".amr" || ext == ".wmv"){// 音频
                $(".chat_message").append("<li>"+message.from+"说：<audio controls><source src='"+ message.url +"'/></audio></li>");
            }
        });
    }

    /**
     * 单聊、群组发送图片消息
     */
    function sendPrivateImg(chat,obj){
        var to = $(obj).parents("form").find("input[name='to']").val();

        hxSendPrivateImg(to,chat,function (file) {   // 消息上传成功
            console.log('onFileUploadComplete');

            $(".chat_message").append("<li class='mySend'>我说：<img src="+file.url+"></li>");
        });
    }


    /**
     * 单聊、群组发送文件消息
     */
    function sendPrivateFile(chat,obj) {
        var to = $(obj).parents("form").find("input[name='to']").val();

        hxSendPrivateFile(to,chat,function (file) {                // 消息发送成功
            console.log('Success');
            $(".chat_message").append("<li class='mySend'>我说：<a href='"+ file.url +"'>下载文件消息</a></li>");
        });
    }

    /**
     * 单聊、群组发送音频消息
     * @param obj
     */
    function sendPrivateAudio(chat,obj) {
        var to = $(obj).parents("form").find("input[name='to']").val();

        hxSendPrivateAudio(to,chat,function (file) {                // 消息发送成功
            console.log('Success');
            $(".chat_message").append("<li class='mySend'>我说：<audio controls>" +
                                        "<source src='"+file.url+"'/></audio>" +
                                    "</li>");
        });
    }


    /**
     * 单聊、群组发送视频消息
     */
    function sendPrivateVideo(chat,obj) {
        var to = $(obj).parents("form").find("input[name='to']").val();

        hxSendPrivateVideo(to,chat,function (file) {                // 消息发送成功
            console.log('Success');
            console.log(file);
            $(".chat_message").append("<li class='mySend'>我说：<video width='320' height='240' controls>" +
                                        "<source src='"+file.url+"'/></video>" +
                                    "</li>");
        });
    }


    /**
     * 收到文件消息
     * @param message
     */
    function fileMessage(message) {
        $(".chat_message").append("<li>"+message.from+" : <a href='"+message.url+"'>"+message.filename+" : 下载文件</a></li>");
    }

    /**
     * 同意添加对方为好友
     * @param to 对方的帐号
     */
    function requestAddFriends(to) {
         // 同意添加好友操作的实现方法
         conn.subscribed({
             to: to,
             message : '[resp:true]'
         });
         conn.subscribe({//需要反向添加对方好友
             to: to,
             message : '[resp:true]'
         });
    }

    /**
     * 拒绝添加对方为好友
     * @param to 对方的帐号
     */
    function requestRemoveFriends(to) {
        /*拒绝添加好友的方法处理*/
        conn.unsubscribed({
            to: to,
            message : 'rejectAddFriend'
        });
    }

    /**
     * 删除好友
     * @param obj
     */
    function removeFriends(obj) {
        var to = $(obj).parents("form").find("input[name='to']").val();

        hxRemoveFriends(to,function (data) {// 删除成功
            alert(to + "已经被您成功删除~");
            conn.unsubscribed({
                to: to
            });
        });
    }


    // 加载表情
    function expression(obj) {
        var keys=[];//定义一个数组用来接受key
        var values=[];//定义一个数组用来接受value

        var obj = WebIM.Emoji.map;
        var expression_html = "";
        $(".expression").empty();
        for(var key in obj){
            keys.push(key);
            values.push(obj[key]);//取得value
            expression_html += '<li key="'+key+'" class=""><img src="'+(WebIM.Emoji.path+obj[key])+'" onclick="expression_face(this);"></li>';
        }

        $(".expression").html(expression_html);
    }


    /**
     * 发送表情
     * @param obj
     */
    function expression_face(obj){
        console.log("图片地址:" + obj.src);
        console.log("表情:" + $(obj).parents().attr("key"));

        var message = $("input[name='message']");
        message.val(message.val() + $(obj).parents().attr("key"));
    }


    /**
     * 将好友加入黑名单
     */
    function toBlackList(obj){
        var to = $(obj).parents("form").find("input[name='to']").val();

        hxAddToBlackList(to,function (data) {
            console.log('Add friend to black list success');
        });
    }


    /**
     * 创建群组
     */
    function create_group(obj) {
        var name = $(obj).parents("form").find("input[name='name']").val();
        var des = $(obj).parents("form").find("input[name='description']").val();
        var member = $(obj).parents("form").find("input[name='members']").val().split(",");

        hxCreateGroup(name,des,member);
    }


    /**
     * 解散群组
     */
    function destroy_group(obj) {
        var reason = $(obj).parents("form").find("input[name='reason']").val();
        var roomId = $(obj).parents("form").find("input[name='roomId']").val();

        hxDestroyGroup(reason,roomId,function () {
            console.log('Destroy group success!');
        });
    }


    /**
     * 退出群组
     */
    function leave_group(obj) {
        var to = $(obj).parents("form").find("input[name='to']").val();
        var roomId = $(obj).parents("form").find("input[name='roomId']").val();

        hxLeaveGroup(to,roomId,function () {
            console.log('You leave room succeed!');
        });
    }
    
    
    /**
     * 将好友加入群组
     */
    function add_group_members(obj) {
        var list = $(obj).parents("form").find("input[name='list']").val().split(",");
        var roomId = $(obj).parents("form").find("input[name='roomId']").val();

        hxAddGroupMembers(list,roomId);
    }


    /**
     * 将成员踢出群组
     * @param obj
     */
    function add_to_group_black_list(obj) {
        var roomId = $(obj).parents("form").find("input[name='roomId']").val();
        var to = $(obj).parents("form").find("input[name='to']").val();

        hxAddToGroupBlackList(roomId,to,function () {
            console.log('add to black list succeed');
        });
    }


</script>
</html>